@extends('layouts.back_stage')
@section('content')
  <style>
  /* .container{margin-top:30px} */
  #app{padding:20px}
 .alignTabel{text-align:center}
  .table_margin{padding:80px 10px 80px 40px;background:#fff;margin:10px 40px 0 0px}
  .right-f{text-align:right; margin:0 10px 30px 0} 
  .prev_l{text-align:center;margin-top:40px }
 p .el-transfer-panel__body{height:450px}
 .el-transfer-panel__body .el-transfer-panel__list.is-filterable{height:360px}
 .el-transfer .el-transfer-panel{width:250px}
 .ingred_sel{width:180px;margin-left:10px}
 b{float:right}
 p{margin:10px}
 /* .el-tabs__content .el-transfer{width:80%} */
  </style>
  <div class="container">
        <div class="page-body" id="app"> 
           <div class="table_margin"  >
              <div class="right-f">
                  <el-button size="small"  @click="adddialogV"type="primary">成员管理</el-button>
                  <el-button size="small"  @click="addClient" type="primary">添加部门</el-button>
              </div>
           <template>
                  <el-table
                    :data="clientTabel"
                    border
                    size="mini"
                    style="width: 100%">
                    <el-table-column
                     fixed
                     align="center"
                      type="index"
                      label="序号"
                      width="150">
                  </el-table-column>
                    <el-table-column   
                      prop="department"
                      label="部门"
                      align="center"
                      >
                    </el-table-column>
                    <el-table-column
                      fixed="right"
                      label="操作"
                      align="center"
                      width="300">
                      <template slot-scope="scope">
                        <el-button type="text" size="small" @click="Datapost(scope)" >修改</el-button>
                        <el-button type="text" @click="remove(scope)" size="small">删除</el-button>
                      </template>
                    </el-table-column>
                    
                  </el-table>
                </template>
                    <div class="prev_l">
                      <el-pagination
                        background
                        @current-change="currentChange"
                        layout="prev, pager, next"
                        :total="total">
                      </el-pagination> 
                   </div>  
                  
                   <div class="demo">
                      <el-dialog
                          :visible.sync="dialogV"
                          width="58%"
                          >
                               <p>
                                  <el-tabs v-model='activeName'  :tab-position="tabPosition" @tab-click="handleClick" type="border-card" style="height: 525px;}">
                                   <el-tab-pane  v-for="itme in arr" 
                                   :label='itme.department' 
                                   :key='itme.id' 
                                   :name="itme.id.toString()"></el-tab-pane>
                                   <template>
                                      <el-transfer
                                       v-model="value1" 
                                       filterable
                                       :titles="['所有员工','部门员工']"
                                      :data="data"></el-transfer>
                                    </template>

                                  </el-tabs>
                                </p>
                          <span slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="submitSection"> 确 定</el-button>
                          </span>
                        </el-dialog>
                    </div>
                    <div>
                    <el-dialog
                        title="提示"
                        :visible.sync="updataDation"
                        width="50%"
                        :before-close="handleClose">
                         <div>
                           <p>
                            <label>部门名 &nbsp; &nbsp;&nbsp;</label>
                              <el-input  class="ingred_sel"  v-model="data_name"   size="small"  placeholder="请输入"></el-input>
                                <b>
                                  <el-button  class="touching"  size="small" >取消</el-button>
                                  <el-button type="primary" class="touching" @click="updataSumit" size="small" >保存</el-button>   
                                </b>
                            </p> 
                            <el-transfer v-model="value2"   :titles="['所有员工','部门员工']" :data="data2"></el-transfer>
                         </div>
                       
                      </el-dialog>
                    
                    </div>
           </div>
        </div>         
  </div>
 
  <script>
      new Vue({
        el: '#app',
      data() { 
        const generateData = _ => {
        const data2 = [];
        for (let i = 1; i <= 15; i++) {
          data2.push({
            key: i,
            label: `备选项 ${ i }`,
            disabled: i % 4 === 0
          });
        }
        return data2; 
      };
          return {
            data2: [],
            value2: [],
            clientTabel:[],//表格
            total:1,//分页
            data_name:"",//这个是修改对话框里面的部门
            updataDation: false,//
            dialogVisible: true,//这是删除弹出对话框
            dialogV:false,//新增对话框
            tabPosition: 'right',//成员管理对话框里的tabs
           itme:'',
            data: [],
            pageChange:'1',//这个是页数 
            value1: [],//所有的成员
            valueId:[],
            keyId:[],//用来装tabs的id
           idKey:'' ,
           arr:[],
           ids:'',//装电机修改时部门的id
           empl:[],
           dataId:[],//用来装穿梭框里的id
           emplTemp:[],
           activeName: '',
           arr2:[],//给后台的数据
           namelabel:''
          }
        },
      methods: {
        handleClose(done) {
            this.updataDation=false
      },
      //修改提交
      updataSumit(){
        let that=this
        $.ajax({
              type:'post',
              url:'/departments/assign',
              dataType:'json',
              data:{
                id:that.ids,
                employee:that.value2,
                name:that.data_name

              },
              success:function(res){
                // console.log(res)
              
                that.$message({
                      message: '成员配置成功',
                      type: 'success'
                    });
                
              }
          })
          this.updataDation=false
      },
        // 点击修改
        Datapost(scope){
         let that=this
         let arr=[]
         this.ids=scope.row.id
         let arrey=[]
          $.ajax({
              type:'get',
              url:`/departments/members/${this.ids}`,
              dataType:'json',
              data:{
                
              },
              success:function(res){
                console.log(res.content)
                for(var e in res.content){
                    arr=res.content[e].members
                    that.data_name=res.content[e].department
                }
                for(var key in arr){
                   arrey.push(arr[key].id)
                }
              }  
           })
          //  that.data_name=department
            this.value2=arrey
                that.data2= that.empl
                this.updataDation=true
        },
        // 这个是成员管理的tab数据切换
        handleClick(tab, event) {
          var clientget=[]
          let that=this
        let ass = this.arr.filter(item=>{   
          return item.id==this.activeName
        })
        
         for(var e in ass){
           var tetst=ass[e].members
           for(var k in tetst){
            
            clientget.push(tetst[k].id)
           }
         }
        that.value1=clientget
        that.data= this.empl
        },
        //成员管理的提交
        submitSection(){
          let that=this
             // console.log(this.value1)
             $.ajax({
                      type:'post',
                      url:'/departments/assign',
                      dataType:'json',
                      data:{
                        id:this.activeName,
                        employee:this.value1
                      },
                      success:function(res){
                       // console.log(res)
                     
                      
                       //that.postTabel();
                     
                        that.$message({
                                  message: '成员配置成功',
                                  type: 'success'
                                });
                       
                    
                      }
                  })
                    that.dialogV=false;

        },
        currentChange(val){
        this.pageChange=val
        this.postTabel();
        },
          //这是页面加载获取tabel的数据
            postTabel(){
              let that=this
              
                  $.ajax({
                      type:'get',
                      url:'/departments/index',
                      dataType:'json',
                      data:{
                        current_page:this.pageChange
                      },
                      success:function(res){
                       console.log(res)
                         that.pageChange=res.content.current_page
                         that.clientTabel=res.content.data
                         that.total=res.content.total
                       
                      }
                  })
            },
            //点击成员管理弹出对话框
            adddialogV(){
              let that=this
              that.dialogV=true
             
                  $.ajax({
                      type:'get',
                      url:'/departments/members',
                      dataType:'json',
                      data:{
                        
                      },
                      success:function(res){
                        console.log('部门加上部门里的员工',res)
                        that.arr=res.content
                        that.data= that.empl
                      }
                  })
                 
            },
            //所有员工
            employees(){
              let that=this
            //  var empl=[]
              var valueId=[]
              $.ajax({
                  type:'get',
                  url:'/departments/employees',
                  dataType:'json',
                  success:function(res){  
                    console.log('全部员工',res)
                    var empioyarr=res.content
                        for(let e in  empioyarr){
                            that.namelabel=empioyarr[e].admin_name
                         valueId.push(empioyarr[e].id,)
                         that.empl.push({
                                 key:empioyarr[e].id,
                                 label:empioyarr[e].admin_name
                            })    
                      } 
                   that.emplTemp = Object.assign([],that.empl);
                   // that.value1=valueId
                  }
              })
          },
           //点击删除按钮
            remove(scope) {
              let that=this
              that.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                      $.ajax({
                          type:'delete',
                          url:`/departments/delete/${scope.row.id}`,
                          dataType:'json',
                          success:function(res){
                            that.postTabel();
                            that.$message({
                                  message: '删除成功',
                                  type: 'success'
                                });
                          }
                      })
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  });          
                });
              },
              //点击新增页面
              addClient(){
                window.location.href='/departments/create';
              }
             },
       created(){
           this.postTabel();
           this.employees();
          }
      })
  </script>
@endsection